<template>
    <div>
        <div></div>
        <div style="margin-top: 10px">
            <!--
            schedulingid;
            starttime;
            fkCarriersid;
            fkTruckid;
            oilcost;
            toll;
            fine;
            othercost;
            totalcost;
            fkUserid;
            remark;
            checkintime;.

            -->
            <el-tag>调度任务信息</el-tag>
            <el-table :data="schedules" stripe border>
                <el-table-column prop="schedulingid" label="调度编号"></el-table-column>
                <el-table-column prop="starttime" label="出发时间"></el-table-column>
                <el-table-column prop="oilcost" label="油费"></el-table-column>
                <el-table-column prop="toll" label="过桥费"></el-table-column>
                <el-table-column prop="fine" label="罚款"></el-table-column>
                <el-table-column prop="othercost" label="其他费用"></el-table-column>
                <el-table-column prop="totalcost" label="总费用"></el-table-column>
                <el-table-column prop="checkintime" label="录入时间"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px">
            <el-tag type="success">待调度承运单</el-tag>
            <el-table
                    :data="carriers"
                    stripe
                    border
                    width="100%">
                <el-table-column fixed width="100" prop="carriersid" label="运单编号"></el-table-column>
                <el-table-column fixed width="100" prop="sendcompany" label="发货单位"></el-table-column>
                <el-table-column width="100" prop="sendaddress" label="发货地址"></el-table-column>
                <el-table-column width="100" prop="sendlinkman" label="发货人"></el-table-column>
                <el-table-column width="100" prop="sendphone" label="发货人电话"></el-table-column>
                <el-table-column width="100" prop="receivecompany" label="收货单位"></el-table-column>
                <el-table-column width="100" prop="fkReceiveaddress" label="收货地址"></el-table-column>
                <el-table-column width="100" prop="receivelinkman" label="收货人"></el-table-column>
                <el-table-column width="100" prop="receivephone" label="收货人电话"></el-table-column>
                <el-table-column width="100" prop="leaverdate" label="承运日期"></el-table-column>
                <el-table-column width="100" prop="receivedate" label="收货日期"></el-table-column>
                <el-table-column width="100" label="订单状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.finishedstate==0">待调度</el-tag>
                        <el-tag v-else-if="scope.row.finishedstate==1">已调度</el-tag>
                        <el-tag v-else-if="scope.row.finishedstate==2">已签收</el-tag>
                        <el-tag v-else-if="scope.row.finishedstate==3">已结算</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="100" prop="insurancecost" label="保险费"></el-table-column>
                <el-table-column width="100" prop="transportcost" label="运费"></el-table-column>
                <el-table-column width="100" prop="othercost" label="其他费用"></el-table-column>
                <el-table-column width="100" prop="totalcost" label="总费用"></el-table-column>
                <el-table-column width="100" prop="fkUserid" label="业务员"></el-table-column>
                <el-table-column width="150" prop="checkintime" label="录入时间"></el-table-column>
                <el-table-column width="100" prop="remark" label="备注"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="showScheduleView(scope.row)">调度</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="任务调度"
                :visible.sync="dialogVisible"
                width="50%">
            <div>
                <table>
                    <tr>
                        <td>出发时间</td>
                        <td>
                            <el-date-picker
                                    v-model="schedule.starttime"
                                    type="datetime"
                                    size="mini"
                                    value-format="yyyy-MM-dd HH:mm"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>分配车辆</td>
                        <td>
                            <el-tag v-if="schedule.fkTruckid">{{trucknumber}}</el-tag>
                            <el-popover
                                    @show="showPop"
                                    placement="right"
                                    title="选择车辆"
                                    width="500"
                                    v-model="visible"
                                    trigger="manual">
                                <div>
                                    <el-table
                                            :data="trucks"
                                            border
                                            highlight-current-row
                                            size="mini"
                                            @current-change="handleCurrentChange"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="number"
                                                label="车牌号">
                                        </el-table-column>
                                        <el-table-column
                                                prop="type"
                                                label="车辆类型">
                                        </el-table-column>
                                        <el-table-column
                                                prop="length"
                                                label="车辆长度">
                                        </el-table-column>
                                        <el-table-column
                                                prop="tonnage"
                                                label="吨位">
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <el-button slot="reference" size="mini" type="primary" @click="visible=true">点击分配
                                </el-button>
                            </el-popover>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="addScheduling">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getRequest} from "../../utils/api";
    import {postRequest} from "../../utils/api";

    export default {
        name: "ScheduleTask",
        data() {
            return {
                dialogVisible: false,
                visible: false,
                schedule: {
                    schedulingid: '',
                    starttime: '',
                    fkCarriersid: '',
                    fkTruckid: '',
                    oilcost: '',
                    toll: '',
                    fine: '',
                    othercost: '',
                    totalcost: '',
                    fkUserid: '',
                    remark: '',
                    checkintime: ''
                },
                trucknumber: '',
                schedules: [],
                trucks: [],
                carriers: []
            }
        },
        mounted() {
            this.initSchedules();
            this.loadCarriersByState(0);
        },
        methods: {
            addScheduling() {
                postRequest("/scheduling/", this.schedule).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initSchedules();
                        this.loadCarriersByState(0);
                    }
                })
            },
            handleCurrentChange(val) {
                this.schedule.fkTruckid = val.truckid;
                this.trucknumber = val.number
                this.visible = false;
            },
            showPop() {
                getRequest('/scheduling/truck?state=2').then(resp => {
                    if (resp) {
                        this.trucks = resp.data;
                    }
                })
            },
            showScheduleView(data) { /*调度操作*/
                this.schedule.fkCarriersid = data.carriersid;
                this.dialogVisible = true;
            },
            loadCarriersByState(state) { /*通过是否分配来展示数据*/
                getRequest('/scheduling/carriers?state=' + state).then(resp => {
                    if (resp) {
                        this.carriers = resp.data;
                    }
                })
            },
            initSchedules() {  /*响应的所有数据*/
                getRequest('/scheduling/').then(resp => {
                    if (resp) {
                        this.schedules = resp.data;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>